// Vue is loaded globally via CDN in index.html, so we use the global Vue object
// import { createApp } from 'vue';
// import App from './components/App.vue'; // We will load App using httpVueLoader

const { createApp } = Vue; // Use the global Vue object
console.log("Checking window.httpVueLoader at the start of main.js:", window.httpVueLoader); // DEBUG

// Use httpVueLoader - window.httpVueLoader should be available from CDN
const loadApp = async () => {
  try {
    // Import all .js component definitions directly
    const AppModule = await import('./components/App.js');
    const AppDefinition = AppModule.default;

    const TagFilterModule = await import('./components/TagFilter.js');
    const TagFilterDefinition = TagFilterModule.default;
    
    const CenterColumnModule = await import('./components/CenterColumn.js');
    const CenterColumnDefinition = CenterColumnModule.default;

    console.log("AppDefinition (imported .js):", AppDefinition);
    console.log("TagFilterDefinition (imported .js):", TagFilterDefinition);
    console.log("CenterColumnDefinition (imported .js):", CenterColumnDefinition);

    if (AppDefinition && TagFilterDefinition && CenterColumnDefinition) {
      const app = createApp(AppDefinition);
      
      // App.js now handles its own child component imports and registration
      // via its 'components' option. So, global registration here is not strictly necessary
      // if App.js correctly imports and registers TagFilter and CenterColumn.
      // However, to be safe or if App.js's components option was empty, we could do:
      // app.component('tag-filter', TagFilterDefinition);
      // app.component('center-column', CenterColumnDefinition);
      
      app.mount('#app');
      console.log("App.js and its children (all .js) loaded, and app mounted.");
    } else {
      console.error("Failed to load one or more critical .js components (App, TagFilter, CenterColumn).");
      if (!AppDefinition) console.error("App.js Definition is missing.");
      if (!TagFilterDefinition) console.error("TagFilter.js Definition is missing.");
      if (!CenterColumnDefinition) console.error("CenterColumn.js Definition is missing.");
      document.getElementById('app').innerHTML = 'Error: Could not load main application components.';
    }
  } catch (error) {
    console.error("Error loading application components:", error);
    document.getElementById('app').innerHTML = `Error loading application: ${error.message || error}`;
  }
};

loadApp();